<!DOCTYPE html>
<html lang="ug" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قول كۆندۈرۈش مەشىقى</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./style/common.css">
    <!-- script -->
    <script src="./script/tailwind4.js"></script>
</head>
<body class="min-h-screen flex flex-col items-center justify-between bg-gradient-to-br from-gray-100 via-gray-200 to-blue-100">
    
    <div class="container mx-auto px-4 flex-grow">
        <div class="mx-auto p-6 max-w-7xl">
            <h1 class="text-3xl font-bold text-center mb-8 text-gray-800 ug-font">قول كۆندۈرۈش مەشىقى</h1>
            
            <div class="mb-6 w-full max-w-8xl mx-auto">
                <div id="practiceTextDisplay" dir="rtl" class="w-full p-3 border-2 border-gray-300 rounded-t-2xl border-b-0 text-right text-2xl font-semibold bg-white ug-font"></div>
                <textarea id="typingArea" dir="rtl"
                    class="w-full h-40 p-3 border-2 border-gray-300 rounded-b-2xl focus:outline-none text-2xl font-semibold bg-white ug-font"
                    placeholder="ئۈستىدىكى ئۈلگە تېسكىتنى كىرگۈزۈپ مەشىقنى باشلاڭ..."
                ></textarea>
            </div>

            <div dir="ltr" class="rounded-3xl mt-12 inline-block select-none w-full max-w-7xl mx-auto">
                <div class="flex gap-4 mb-2" id="fRowPreview">
                    <button data-key="Escape" class="bg-gray-800 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">Esc</button>
                    <button data-key="F1" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F1</button>
                    <button data-key="F2" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F2</button>
                    <button data-key="F3" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F3</button>
                    <button data-key="F4" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F4</button>
                    <button data-key="F5" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F5</button>
                    <button data-key="F6" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F6</button>
                    <button data-key="F7" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F7</button>
                    <button data-key="F8" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F8</button>
                    <button data-key="F9" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F9</button>
                    <button data-key="F10" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F10</button>
                    <button data-key="F11" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F11</button>
                    <button data-key="F12" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">F12</button>
                </div>
                <div class="flex gap-1 mb-2" id="numRowPreview">
                    <button data-key="Backquote" class="bg-gray-800 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">~</span>
                        <span class="absolute bottom-0">`</span>
                    </button>
                    <button data-key="Digit1" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">!</span>
                        <span class="absolute bottom-2">1</span>
                    </button>
                    <button data-key="Digit2" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">@</span>
                        <span class="absolute bottom-2">2</span>
                    </button>
                    <button data-key="Digit3" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">#</span>
                        <span class="absolute bottom-2">3</span>
                    </button>
                    <button data-key="Digit4" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">$</span>
                        <span class="absolute bottom-2">4</span>
                    </button>
                    <button data-key="Digit5" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">%</span>
                        <span class="absolute bottom-2">5</span>
                    </button>
                    <button data-key="Digit6" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">^</span>
                        <span class="absolute bottom-2">6</span>
                    </button>
                    <button data-key="Digit7" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">&</span>
                        <span class="absolute bottom-2">7</span>
                    </button>
                    <button data-key="Digit8" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">*</span>
                        <span class="absolute bottom-2">8</span>
                    </button>
                    <button data-key="Digit9" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">(</span>
                        <span class="absolute bottom-2">9</span>
                    </button>
                    <button data-key="Digit0" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-1">)</span>
                        <span class="absolute bottom-2">0</span>
                    </button>
                    <button data-key="Minus" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-0">_</span>
                        <span class="absolute bottom-2">-</span>
                    </button>
                    <button data-key="Equal" class="bg-gray-900 text-white font-sans text-2xl rounded-2xl w-20 h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95 relative">
                        <span class="absolute top-3">+</span>
                        <span class="absolute bottom-2">=</span>
                    </button>
                    <button data-key="Backspace" class="bg-gray-800 text-white font-sans text-2xl rounded-2xl w-[139px] h-20 border-2 border-gray-700 shadow-xl flex items-center justify-center transition-all duration-100 hover:bg-gray-700 hover:shadow-2xl active:scale-95">Del</button>
                </div>
                <div class="flex gap-1 mb-2">
                    <button data-key="Tab" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-32 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Tab</button>
                    <button data-key="KeyQ" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">Q</span>
                        <span class="absolute bottom-2 right-3 text-4xl font-bold ug-font ug-letter">چ</span>
                    </button>
                    <button data-key="KeyW" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">W</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ۋ</span>
                    </button>
                    <button data-key="KeyE" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">E</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ې</span>
                    </button>
                    <button data-key="KeyR" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">R</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ر</span>
                    </button>
                    <button data-key="KeyT" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">T</span>
                        <span class="absolute bottom-0 right-3 text-4xl font-bold ug-font ug-letter">ت</span>
                    </button>
                    <button data-key="KeyY" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">Y</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ي</span>
                    </button>
                    <button data-key="KeyU" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">U</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ۇ</span>
                    </button>
                    <button data-key="KeyI" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">I</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">و</span>
                    </button>
                    <button data-key="KeyO" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">O</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ۆ</span>
                    </button>
                    <button data-key="KeyP" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">P</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">پ</span>
                    </button>
                    <button data-key="BracketLeft" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1">{</span>
                        <span class="absolute bottom-1">[</span>
                    </button>
                    <button data-key="BracketRight" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1">}</span>
                        <span class="absolute bottom-1">]</span>
                    </button>
                    <button data-key="Backslash" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-[136px] h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-14">|</span>
                        <span class="absolute bottom-1">\</span>
                    </button>
                </div>
                <div class="flex gap-1 mb-2">
                    <button data-key="CapsLock" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-40 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Caps</button>
                    <button data-key="KeyA" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">A</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ھ</span>
                    </button>
                    <button data-key="KeyS" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">S</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">س</span>
                    </button>
                    <button data-key="KeyD" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">D</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">د</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">ژ</span>
                    </button>
                    <button data-key="KeyF" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">F</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ا</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">ف</span>
                    </button>
                    <button data-key="KeyG" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">G</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ە</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">گ</span>
                    </button>
                    <button data-key="KeyH" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">H</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ى</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">خ</span>
                    </button>
                    <button data-key="KeyJ" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">J</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ق</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">ج</span>
                    </button>
                    <button data-key="KeyK" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">K</span>
                        <span class="absolute bottom-0 right-3 text-4xl font-bold ug-font ug-letter">ك</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">ۆ</span>
                    </button>
                    <button data-key="KeyL" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-1xl opacity-99 en-letter">L</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ل</span>
                        <span class="absolute bottom-1 left-2 text-xl ug-font text-red-400 ug-letter ug-s-letter">لا</span>
                    </button>
                    <button data-key="Semicolon" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-2">:</span>
                        <span class="absolute bottom-3">;</span>
                    </button>
                    <button data-key="Quote" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-3">"</span>
                        <span class="absolute bottom-0">'</span>
                    </button>
                    <button data-key="Enter" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-48 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Enter</button>
                </div>
                <div class="flex gap-1 mb-2">
                    <button data-key="ShiftLeft" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-48 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Shift</button>
                    <button data-key="KeyZ" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">Z</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ز</span>
                    </button>
                    <button data-key="KeyX" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">X</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ش</span>
                    </button>
                    <button data-key="KeyC" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">C</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">غ</span>
                    </button>
                    <button data-key="KeyV" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">V</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ۈ</span>
                    </button>
                    <button data-key="KeyB" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">B</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ب</span>
                    </button>
                    <button data-key="KeyN" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">N</span>
                        <span class="absolute bottom-1 right-3 text-4xl font-bold ug-font ug-letter">ن</span>
                    </button>
                    <button data-key="KeyM" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">M</span>
                        <span class="absolute bottom-2 right-3 text-4xl font-bold ug-font ug-letter">م</span>
                    </button>
                    <button data-key="Comma" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-2"><</span>
                        <span class="absolute bottom-3">,</span>
                    </button>
                    <button data-key="Period" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-2">></span>
                        <span class="absolute bottom-3">.</span>
                    </button>
                    <button data-key="Slash" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-20 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95 relative">
                        <span class="absolute top-1 left-2 text-xl opacity-99">/ ?</span>
                        <span class="absolute bottom-0 right-3 text-4xl font-bold ug-font ug-letter">ﯻ</span>
                    </button>
                    <button data-key="ShiftRight" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-[249px] h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Shift</button>
                </div>
                <div class="flex gap-1 mb-2">
                    <button data-key="ControlLeft" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Ctrl</button>
                    <button data-key="MetaLeft" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Win</button>
                    <button data-key="AltLeft" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Alt</button>
                    <button data-key="Space" class="bg-gray-900 text-white font-mono text-2xl rounded-xl w-[549px] h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Space</button>
                    <button data-key="AltRight" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Alt</button>
                    <button data-key="MetaRight" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Win</button>
                    <button data-key="ContextMenu" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Menu</button>
                    <button data-key="ControlRight" class="bg-gray-800 text-white font-mono text-2xl rounded-xl w-24 h-20 border-2 border-gray-700 shadow-lg transition-all duration-100 hover:bg-gray-700 active:scale-95">Ctrl</button>
                </div>
            </div>
            <p dir="rtl" class="ug-font text-lg text-center mt-2">ئەسكەرتىش: <span class="text-red-600">قىزىل</span> رەڭدىكى ھەرىپلەرنى كونۇپكا تاختىسىدىكى <code class="text-xs mt-2 bg-black text-white p-1 rounded-md">SHIFT</code> كونۇپكىسىنى بېسىپ تۇرۇپ باسىسىز.</p>
        </div>
    </div>

    <!-- Sidebar Drawer -->
    <div dir="" id="sidebarDrawer" class="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 rounded-l-3xl flex flex-col ug-font">
        <div class="flex items-center justify-between p-4 border-b border-indigo-100">
            <span class="text-xl font-bold">تەڭشەك</span>
            <button onclick="closeDrawer()" class="text-2xl font-bold text-gray-500 hover:text-red-500">&times;</button>
        </div>
        <div class="p-6 space-y-6">
            <div class="setting-block-title">
                <p class="text-xl font-bold">تاختا تەڭشىكى ---</p>
            </div>
            <div class="flex items-center gap-2 mb-4">
                <label for="toggleFRow" class="inline-flex items-center cursor-pointer">
                    <input id="toggleFRow" type="checkbox" class="sr-only peer">
                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-900">F قۇرى (ئېچىش/تاقاش)</span>
                </label>
            </div>
            <div class="flex items-center gap-2 mb-4">
                <label for="toggleNumRow" class="inline-flex items-center cursor-pointer">
                    <input id="toggleNumRow" type="checkbox" class="sr-only peer">
                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-900">سان قۇرى (ئېچىش/تاقاش)</span>
                </label>
            </div>
            <div class="flex items-center gap-2 mb-4">
                <label for="toggleKeySound" class="inline-flex items-center cursor-pointer">
                    <input id="toggleKeySound" type="checkbox" class="sr-only peer" checked>
                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-900">كونۇپكا ئاۋازى</span>
                </label>
            </div>
            <div class="setting-block-title">
                <p class="text-xl font-bold">مەشىق تەڭشىكى ---</p>
            </div>
            <div class="flex flex-col gap-4 mb-4">
                    <label class="font-semibold" for="practiceTypeSidebar">مەشىق تۈرى:</label>
                    <select id="practiceTypeSidebar" onchange="changeType(this.value)" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                        <option value="random">ئىختىيارى</option>
                        <option value="words">سۆزلەر</option>
                        <option value="sentences">جۈملىلەر</option>
                    </select>
                </div>
        </div>
    </div>
    <!-- Floating Settings Button -->
    <button onclick="openDrawer()" class="fixed bottom-15 right-8 z-49 bg-blue-600 hover:bg-blue-800 text-white rounded-full shadow-xl w-14 h-14 flex items-center justify-center text-3xl transition-all duration-200">
        ⚙
    </button>
    
    <footer class="w-full ">
        <div class="w-full py-1 text-center font-light text-sm">
            <p class="text-gray-500">UYGHUR TYPE PRACTICE · VERSION 1.0 · AUTHOR <a href="https://bilnap.cn" target="_blank">BILNAP</a></p>
        </div>
    </footer>
    
    <script src="./script/theme.js" type="text/javascript"></script>
    <script src="./script/keyboard.js" type="text/javascript"></script>
    <script src="./assets/data.js" type="text/javascript"></script>
    <script src="./script/practice.js" type="text/javascript"></script>
</body>
</html>
